﻿@{
    Layout = null;

    var sys_menuroleinfo = ViewBag.sys_menuroleinfo;

}

<script src="~/Scripts/MGJJS/Product/ProductBatch.js"></script>

<script src="~/Scripts/MGJJS/OriginsNode/OriginsNodeConfig.js"></script>
<script src="~/Scripts/MGJJS/OriginsNode/OriginsNodeAdd.js"></script>

<script src="~/Scripts/MGJJS/TraceSource/PageOperation/jquery.qrcode.min.js"></script>

<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>

<script>
    function showPanel(obj) {
        $(obj).parent().parent().nextAll('.panel-collapse').toggle();
    }
</script>


<link href="~/Content/TraceSource/main.css" rel="stylesheet" />
@*<style>
    .disable {
        color: red;
    }

    .TSB_BodyTop {
        background: #f8f8f8;
        padding: 15px 34px;
        box-shadow: 0 0 1px rgba(0,0,0,.15);
        clear: both;
    }

    .TSB_Label {
        cursor: pointer;
        width: 16px;
        height: 16px;
        border: 1px solid #999999;
        border-radius: 4px;
        position: relative;
        top: 4px;
    }

    .TSB_Label > input {
        opacity: 0;
    }

    .TSB_Body > li {
        box-shadow: 0 0 1px rgba(0,0,0,.15);
        padding: 15px 10px;
        display: -webkit-box;
        clear: both;
        height: 100%;
        width: 100%;
    }

    .div_icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background: #6cc788;
        display: inline-block;
        text-align: center;
        color: #FFFFFF;
    }

    .TSB_Body_Img {
        display: block;
        width: 100px;
        height: 100px;
    }

    .TSB_Body > li:hover {
        background-color: #f8f8f8;
    }

    .TSB_Body .btn-default {
        border: 1px solid #999999;
        margin: 0 5px;
    }

    .imgBox {
        float: left;
        margin: 5px;
        height: 50px;
        border: 1px solid rgba(120,130,140,.25);
        position: relative;
        width: 62px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        border-radius: 4px;
    }

    .imgBox > img {
        width: 100%;
    }
</style>*@




<style>
    .TSB_BodyTop {
        background: #f8f8f8;
        padding: 15px 38px;
        box-shadow: 0 0 1px rgba(0,0,0,.15);
    }

    .TSB_Label {
        cursor: pointer;
        width: 16px;
        height: 16px;
        border: 1px solid #999999;
        border-radius: 4px;
        position: relative;
        top: 4px;
    }

        .TSB_Label > input {
            opacity: 0;
        }

    .TSB_Body > li {
        box-shadow: 0 0 1px rgba(0,0,0,.15);
        padding: 15px 10px;
        display: -webkit-box;
        clear: both;
        height: 100%;
        width: 100%;
    }

    .div_icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background: #6cc788;
        display: inline-block;
        text-align: center;
        color: #FFFFFF;
    }

    .TSB_Body_Img {
        display: block;
        width: 90px;
        height: 70px;
        border-radius: 3px;
    }

    .TSB_Body > li:hover {
        background-color: #f8f8f8;
    }

    .TSB_Body .btn-default {
        border: 1px solid #d8d8d8;
        margin: 0 5px;
    }

    .TSB_Body .btn {
        margin: 0 5px;
    }

    .TSB_BodyTop .btn {
        margin-left: 10px;
    }

    .Icon_Common {
        background: url(../../../Content/webImgs/TraceSource/OriginsMaterialList/Icon_Common.png) no-repeat;
    }
        .Icon_Gold {
        background: url(../../../Content/webImgs/TraceSource/OriginsMaterialList/Icon_Gold.png) no-repeat;
    }
    .Icon_Platinum {
        background: url(../../../Content/webImgs/TraceSource/OriginsMaterialList/Icon_Platinum.png) no-repeat;
    }
    .Icon_Diamond {
        background: url(../../../Content/webImgs/TraceSource/OriginsMaterialList/Icon_Diamond.png) no-repeat;
    }
</style>





<div class="mtlr15">
    <form id="SearchForm" role="form" onkeydown="if(event.keyCode==13){return false;}">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8" style="padding:0">
                @*<button type="button" class="btn btn-success" onclick="$.MGJ.ProductBatch.Dialog_AddBatch()">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                    新增
                </button>
                <button type="button" class="btn btn-success" onclick="$.MGJ.ProductBatch.Execl('#ProductBatchTable')">
                    <i class="glyphicon glyphicon-arrow-up"></i>
                    导出excel
                </button>*@
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="input-group">
                    <div style="width:100%;display:none"></div>
                    <input type="text" class="form-control" placeholder="批次名称" name="BatchName" id="BatchName" onkeydown="if (event.keyCode == 13) { $.MGJ.ProductBatch.Ajax_ProductBatchList(1); }">
                    <span class="input-group-addon" onclick="$.MGJ.ProductBatch.Ajax_ProductBatchList(1);">
                        <span class="glyphicon glyphicon-search"></span>
                    </span>
                    <div class="input-group-btn" style="margin-left:1px;" onclick="detailSearch(this)">
                        <button type="button" class="btn btn-default" style="border: 1px solid transparent;">
                            更多搜索
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail-search-con" style="display:none">
            <div class="row newrow">
                <div class="col-lg-1 col-md-1 col-sm-1 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 text-right" style="padding:0">
                    开始时间
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    <input id="StartDate" type="text" name="StartDate" class="form-control" placeholder="开始时间" />
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-sm-2 text-right" style="padding:0">
                    结束时间
                </div>

                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-3">
                    <input id="EndDate" type="text" name="EndDate" class="form-control" placeholder="结束时间" />
                </div>
            </div>
            <div class="row newrow">
                <div class="col-lg-1 col-md-1 col-sm-1 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 text-right" style="padding:0">
                    机构名称
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    <input type="text" name="EnterpriseName" class="form-control" placeholder="机构名称" maxlength="25" />
                </div>

                <div class="col-lg-1 col-md-1 col-sm-1 text-right" style="padding:0">
                    产品名称
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-2">
                    <input type="text" name="ProductName" class="form-control" placeholder="产品名称" maxlength="25" />
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-2 text-center">
                    <button type="button" class="btn btn-default" style="margin-left:23px;" onclick="$.MGJ.ProductBatch.Ajax_ProductBatchList(1);">
                        <span class="glyphicon glyphicon-search"></span>
                        搜索
                    </button>
                    <button type="reset" class="btn btn-default">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>

    @*<div class="tab-content" id="Table">
        <div role="tabpanel" class="tab-pane fade active in overflow" id="Batch-List" aria-labelledby="Batch-List-tab">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th width="15"><input type="checkbox" class="AllClickCheckbox"></th>
                        <th>批次名称</th>
                        <th>商品名称</th>
                        <th>所属机构</th>
                        <th>创建时间</th>
                        <th>展示类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="ProductBatchTable" style="display:none;" binding="{'pageId':'ShoppingPager','pageCallback':'$.MGJ.ProductBatch.Ajax_ProductBatchList','emptyHtml':PID_EmptyHtml}">
                    <tr>
                        <td width="15"><input type="checkbox" class="AllClickChild" binding="{'ID':'Id'}"></td>
                        <td binding="{'text':'BatchName','title':'BatchName'}"></td>
                        <td binding="{'title':'ProductName'}" style="display:flex;align-items:center;">
                            <div class="imgBox">
                                <img binding="{'src':'ImageUrl1'}" />
                            </div>
                            <div style="display:inline-block;" binding="{'text':'ProductName'}"></div>
                        </td>
                        <td binding="{'text':'EnterpriseName','title':'EnterpriseName'}"></td>
                        <td binding="{'text':'ChangeDate','textHandle':'datetime'}"></td>
                        <td>
                            <div>
                                @if (sys_menuroleinfo.Extension1 == "1")
                                {
                                    <button class="btn btn-success " binding="{'batchId':'Id'}" onclick=" $.MGJ.NodeConfig.Dialog_NodeConfig($(this).attr('batchId'))">溯源节点配置</button>
                                }
                                else
                                {
                                    <button class="btn btn-success " disabled="disabled" binding="{'batchId':'Id'}" onclick=" $.MGJ.NodeConfig.Dialog_NodeConfig($(this).attr('batchId'))">溯源节点配置</button>
                                }
                            </div>
                            <a binding="{'materialId':'MaterialId','batchId':'Id'}" onclick="$.MGJ.ProductBatch._H5Edit(this)">h5配置</a>
                            @if (sys_menuroleinfo.Extension2 == "1")
                            {
                                <a binding="{'batchId':'Id'}" onclick="$.MGJ.NodeAdd.Dialog_AddNodeSelect(this)">添加节点信息</a>
                            }
                            else
                            {
                                <a binding="{'batchId':'Id'}" style="color:#ccc" href="javascript:return false;">添加节点信息</a>
                            }
                            <a binding="{'materialId':'MaterialId','batchId':'Id'}" onclick="$.MGJ.Common._PrewView($(this).attr('materialId'), $(this).attr('batchId'))">预览</a>
                        </td>
                        <td>
                            <a binding="{'PID':'Id'}" onclick="$.MGJ.ProductBatch.Dialog_EditBatch(this)">编辑</a>
                            <a binding="{'PID':'Id'}" onclick="$.MGJ.ProductBatch.Ajax_DelBatch(this)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="ShoppingPager"></div>
    </div>*@




















    <div>
        <div class="TSB_BodyTop">
            <input type="checkbox" id="AllClickCheckbox" class="AllClickCheckbox" />
            <label for="AllClickCheckbox">全选</label>
            <button type="button" class="btn btn-success" onclick="$.MGJ.ProductBatch.Dialog_AddBatch()">
                <i class="glyphicon glyphicon-plus-sign"></i>
                新增
            </button>
            <button type="button" class="btn btn-success" onclick="$.MGJ.ProductBatch.Execl('#ProductBatchTable')">
                <i class="glyphicon glyphicon-arrow-up"></i>
                导出excel
            </button>
        </div>
        <ul class="TSB_Body" style="display:none" id="ProductBatchTable" binding="{'pageId':'ShoppingPager','pageCallback':'$.MGJ.ProductBatch.Ajax_ProductBatchList','emptyHtml':PID_EmptyHtml}">
            <li class="container-fluid container">
                <div class="col-xs-5 col-sm-5 col-md-6 col-lg-6">
                    <div style="float:left;margin-left:13px">
                        <input style="margin-top:13px;" type="checkbox" class="text-left AllClickChild" name="Check" id="Check" />
                    </div>
                    <div class="div_icon Icon_Diamond" style=" float:left; margin:0 5px;">
                    </div>
                    <div style="float: left; margin: 0 5px">
                        <div class="ChangeNameDiv" style="font-weight:600">
                            <span class="ChangeNameDivChild" binding="{'text':'ProductName'}"></span>
                        </div>
                        <div>
                            所属机构：<span binding="{'text':'EnterpriseName','title':'EnterpriseName'}"></span>
                        </div>
                        <div>
                            所属批次：<span binding="{'text':'BatchName','title':'BatchName'}"></span>
                        </div>
                        <div>
                            创建时间：<span binding="{'text':'ChangeDate','textHandle':'datetime'}"></span>
                        </div>
                        <img class="TSB_Body_Img" binding="{'src':'ImageUrl1'}" />
                    </div>
                </div>
                <div class="col-xs-7 col-sm-7 col-md-6 col-lg-6" style="display:flex;display:-webkit-flex;align-items: center;">
                    @if (sys_menuroleinfo.Extension1 == "1")
                    {
                        <button class="btn btn-default " binding="{'batchId':'Id'}" onclick=" $.MGJ.NodeConfig.Dialog_NodeConfig($(this).attr('batchId'))">溯源节点配置</button>
                    }
                    else
                    {
                        <button class="btn btn-default " disabled="disabled" binding="{'batchId':'Id'}" onclick=" $.MGJ.NodeConfig.Dialog_NodeConfig($(this).attr('batchId'))">溯源节点配置</button>
                    }
                    @if (sys_menuroleinfo.Extension2 == "1")
                    {
                        <a binding="{'batchId':'Id'}" class="btn btn-default" onclick="$.MGJ.NodeAdd.Dialog_AddNodeSelect(this)">添加节点信息</a>
                    }
                    else
                    {
                        <a binding="{'batchId':'Id'}" class="btn btn-default" style="color:#ccc" href="javascript:return false;">添加节点信息</a>
                    }
                    <a binding="{'materialId':'MaterialId','batchId':'Id'}" class="btn btn-default" onclick="$.MGJ.Common._PrewView($(this).attr('materialId'), $(this).attr('batchId'))">预览</a>
                    <a binding="{'materialId':'MaterialId','batchId':'Id'}" class="btn btn-default" onclick="$.MGJ.ProductBatch._H5Edit(this)">h5配置</a>
                    <a binding="{'PID':'Id'}" class="btn btn-default" onclick="$.MGJ.ProductBatch.Dialog_EditBatch(this)">编辑</a>
                    <a binding="{'PID':'Id'}" class="btn btn-default" onclick="$.MGJ.ProductBatch.Ajax_DelBatch(this)">删除</a>
                </div>
            </li>
        </ul>
    </div>
    <div id="ShoppingPager"></div>
</div>


<script>
    $("#StartDate").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#EndDate').datepicker('setStartDate', startTime);
    });
    $("#EndDate").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#StartDate').datepicker('setEndDate', endTime);
    });

    var ColspanNub = $(".table.table-hover.table-bordered").find("tr").children("td").length
    window.PID_EmptyHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">无符合条件的数据结果</p></td></tr>';

    $(function () {
        $.MGJ.ProductBatch.Ajax_ProductBatchList(1);
    });

    $('#SearchForm').bootstrapValidator({
        fields: {
            ProductName: {
                validators: {
                    regexp: {
                        regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                        message: '批次名称不能输入符号'
                    },
                    stringLength: {
                        max: 25,
                        message: '批次名称最大长度为25',
                    }
                }
            },
            CheckStatus: {
                validators: {
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: '批次号只能输入字母和数字'
                    },
                    stringLength: {
                        max: 25,
                        message: '批次号最大长度为25'
                    }
                }
            }
        }
    })
</script>